<script setup lang="ts">
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

const currentRouteName = computed(() => route.name);

const onRouter = (name: string) => {
    router.push({ name });
};
</script>

<template>
    <div class="menu-wrap shrink-0">
        <ul class="menu relative flex h-full w-full flex-col items-center">
            <li class="flex items-center justify-center" :class="{ active: currentRouteName === 'home' }" @click="onRouter('home')">
                <p class="line-clamp-2 text-center font-medium">料理長おすすめ逸品</p>
            </li>
            <li class="flex items-center justify-center">
                <p class="line-clamp-2 text-center font-medium">コース</p>
            </li>
            <li class="flex items-center justify-center" :class="{ active: currentRouteName === 'review' }" @click="onRouter('review')">
                <p class="line-clamp-2 text-center font-medium">評価</p>
            </li>
            <li class="flex items-center justify-center" :class="{ active: currentRouteName === 'guide' }" @click="onRouter('guide')">
                <p class="line-clamp-2 text-center font-medium">AIガイド</p>
            </li>
        </ul>
    </div>
</template>

<style lang="scss" scoped>
.menu-wrap {
    width: calc(var(--scale) * 180px);
    height: 100%;
    border-radius: 0px calc(var(--scale) * 40px) 0px 0px;
    padding: 2px 2px 0 0;
    background: linear-gradient(
        175deg,
        #676767 -0.36%,
        #969696 5.34%,
        #f8f3f3 11.5%,
        #ffffff 17.47%,
        #787878 40.12%,
        #b3b0b0 75.04%,
        #414141 89.32%
    );

    .menu {
        background: #26272b;
        border-radius: 0px calc(var(--scale) * 40px) 0px 0px;
        gap: calc(var(--scale) * 20px);
        padding: calc(var(--scale) * 30px) 0;

        li {
            width: calc(var(--scale) * 148px);
            height: calc(var(--scale) * 56px);
            border-radius: calc(var(--scale) * 10px);
            font-size: calc(var(--scale) * 18px);
            font-family: Noto Sans JP;
            line-height: calc(var(--scale) * 18px);
            padding: calc(var(--scale) * 10px) calc(var(--scale) * 14px);

            &.active {
                background: linear-gradient(180deg, #ff555d 11.6%, #e22b35 100%);
            }
        }
    }
}
</style>
